<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>综合案例</title>

    <!-- <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script> -->
    <script src="../assets/vue3.js"></script>

    <style>
        tr {
            height: 40px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年林</td>
                <td>操作</td>
            </tr>

            <tr v-for=" (user ,index) in  users ">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
              
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
            <tr >
                <td colspan="4"><button @click="delAll">清空</button></td>
                
            </tr>

        </table>

        <h3>添加</h3>
        <form action="">
            姓名: <input type="text" v-model="form.name"> <br>
            年龄: <input type="text" v-model="form.age"> <br>

            <!-- form中的按钮默认提交表单 -->
            <button @click="addUser" type="button">添加按钮</button>
        </form>

    </div>



    <script>
        let app = Vue.createApp({
            data() {
                return {
                    form:{
                      name:'',
                      age:0      
                    },
                    users: [
                        { id: 1, name: '张三', age: 18 },
                        { id: 2, name: '李四', age: 28 },
                        { id: 3, name: '王五', age: 38 },
                        { id: 4, name: '赵六', age: 48 },
                    ]
                }
            },
            methods:{


                //删除
                del(index){
                    console.log("删除序号为xxxxxx的元素",index,);

                    //找到当前的user数据
                    this.users.splice(index,1);
                    
                },
                //清空元素
                delAll(){
                    //Vue2 不好用   Vue3 oK
                   this.users = []      
                },
                addUser(){
                    console.log(this.form);

                     this.users.push(this.form)

                     this.form = {
                      name:'',
                      age:0      
                    }
                    
                }
            }

        }).mount("#app")
    </script>
</body>

</html>